<template>
  <div class="app-register">
    <AppHeader class="app-common__header" back title="注册第三步——输入密码"></AppHeader>
    <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required:true, message: '请输入正确密码' }]"
        />
      <van-field
      v-model="repassword"
      type="password"
      name="确认密码"
      label="确认密码"
      placeholder="确认密码"
      :rules="[{ validator: handleValidateTel }]"
      />
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
    </van-cell-group>
    <div style="margin: 16px;">
          <van-button :disabled="!canNext" round block type="primary" native-type="submit">
          完成注册
          </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts" setup>
import {ref,computed} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {isSucessRegisterApi} from '@/api/register'
import type {ICheckcodeParmas} from '@/api/register'
const password=ref<string>('')
const repassword=ref<string>('')
const router=useRouter()
const route=useRoute()
const canNext=computed(()=>{
    if(!password.value)return false
    if(!repassword.value)return false
    if(repassword.value!==password.value)return false
    return true
})
const handleValidateTel=()=>{
  if(!repassword)return '确认密码不能为空'
  if(repassword.value!==password.value)return '两次输入的密码不一致'
  return true
}
const onSubmit=async()=>{
  try {
    const data=await isSucessRegisterApi({tel:route.query.tel as string,password:password.value})
    router.replace({name:'login'})
  } catch (error) {
    
  }

}
</script>